<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
</head>
<body>
<!-- 导航栏 -->
<div class="navbar">
    <div class="navbar_div">
        <ul class="navbar_left">
            <li><a href="/index">首页</a></li>
            <li><a href="/gpt_chat">gpt助手</a></li>
            <li><a href="/chat_room">聊天室</a></li>
        </ul>
        <ul class="navbar_right">
            <li><a href="javascript:;" id="isLogin"></a></li>
        </ul>
    </div>
</div>

<!-- 轮播图容器 -->
<div class="slideshow-container">
    <div class="mySlides">
        <img src="/static/imgs/bo1.jpg">
    </div>
    <div class="mySlides">
        <img src="/static/imgs/bo2.jpg">
    </div>
    <div class="mySlides">
        <img src="/static/imgs/bo3.jpg">
    </div>
    <div id="text_add_del">哈哈哈</div>
    <!-- 前进和后退按钮 -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>


<p style="height: 50px; background-color: #f0eeee;"></p>
<div class="contain">
    <div class="container">
        <div class="con_left">
            <div class="con_left_head">
                <div class="con_left_title">文章列表</div>
            </div>
            <!-- 文章开始 -->
            <div class="gvb_article_item">
                <div class="cover">
                    <img src="http://image.fengfengzhidao.com/gvb_1009/20231019173356__wallhaven-jxd1x5-1920x1080.jpeg">
                </div>
                <div class="info">
                    <div class="title">
                        <a href="/article/YdlixI0BEG4v2tWkq3Yk">go语言embed</a>
                    </div>
                    <div class="abstract">
                        我们都知道，go编译的程序非常适合部署 我们一般编译都知道，go编译的程序非常适合部署 我们一般编都知道，go编译的程序非常适合部署 我们一般编都知道，go编译的程序非常适合部署
                        我们一般编出来的可执行二进制文件都是单个的文件，非常适合复制和部署 还能通过交叉编译在windows上开发编译到linux平台
                    </div>
                    <div class="data">
                        <span class="category">go</span>
                        <span class="date">2024-02-20</span>
                    </div>
                </div>
            </div>
            <!-- 文章结束 -->

        </div>
        <div class="con_right">
            <!-- 日历 -->
            <div class="calendar">
                <p>日历</p>
                <div class="calendar-container">
                    <div class="calendar-header">
                        <button id="prevMonthBtn">&#8249;</button>
                        <h2 id="monthYearDisplay"></h2>
                        <button id="nextMonthBtn">&#8250;</button>
                    </div>
                    <ul class="week-header">
                        <li>Sun</li>
                        <li>Mon</li>
                        <li>Tue</li>
                        <li>Wed</li>
                        <li>Thu</li>
                        <li>Fri</li>
                        <li>Sat</li>
                    </ul>
                    <div class="calendar-days" id="calendarDays"></div>
                </div>
                <p style="height: 10px;"></p>
            </div>

            <!-- 意见反馈 -->
            <div class="feedback-form">
                <h2>意见反馈</h2>
                <div id="feedbackForm">
                    <div class="form-group">
                        <label for="email">你的邮箱:</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="message">你的意见:</label>
                        <textarea id="message" name="message" required></textarea>
                    </div>
                    <div class="form-group">
                        <button type="submit" id="submit_but">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="end">
    <div class="ender">

    </div>
</div>

<script>
    // 导航栏切换颜色
    window.addEventListener('scroll', function () {
        const navbar = document.getElementsByClassName('navbar')[0];
        if (window.scrollY > 250) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    });

    $(document).ready(function () {
        Islogin()
        loadData()
        $('body').on('click','.OneArticle',function (event) {
            event.preventDefault();  // 阻止默认的 链接跳转行为 （阻止a标签内的跳转链接）
            var id = $(this).attr("data");   // 文章的 id
            window.location.href = "/article?id="+id
        })
    })

    // 加载页面数据
    function loadData() {
        $.ajax({
            url:"/articles",
            type:"get",
            dataType:"json",  // 后台获取的 json
            success:function (data) {
                // 获取id为"art_context"的div元素
                const artContextDiv = document.getElementsByClassName("con_left")[0];
                for (const art of data.art){
                    const divTag = document.createElement("div");  //  单个文章的大盒子
                    divTag.className = "gvb_article_item";
                    artContextDiv.appendChild(divTag);

                    const divTag1 = document.createElement("div");  //  包含 图片 的盒子 -- 左盒子
                    divTag1.className = "cover";
                    const img1 = document.createElement("img");  //  文章 图片
                    img1.src = art.images;
                    divTag1.appendChild(img1)
                    const divTag2 = document.createElement("div");  //  包含 内容 的盒子 -- 右盒子
                    divTag2.className = "info";
                    divTag.appendChild(divTag1);
                    divTag.appendChild(divTag2)

                    const divTag2_1 = document.createElement("div");  // 文章标题盒子
                    divTag2_1.className = "title";
                    const aTag = document.createElement("a");   // 文章名字的 a标签
                    aTag.href = "#";
                    aTag.setAttribute("data", art.id);
                    aTag.className = 'OneArticle'
                    aTag.innerText = art.title
                    divTag2_1.appendChild(aTag)
                    const divTag2_2 = document.createElement("div");  //  文章内容
                    divTag2_2.className = "abstract";
                    divTag2_2.innerText = art.introduce
                    const divTag2_3 = document.createElement("div");  //  文章 日期 和 标签
                    divTag2_3.className = "data";
                    const spanTag2_3_1 = document.createElement("span");  //  文章 标题
                    spanTag2_3_1.className = "category";
                    spanTag2_3_1.innerText = art.type
                    const spanTag2_3_2 = document.createElement("span");  // 文章 发布时间
                    spanTag2_3_2.className = "date";
                    spanTag2_3_2.innerText = parseDateTime(art.create_time);

                    divTag2_3.appendChild(spanTag2_3_1);
                    divTag2_3.appendChild(spanTag2_3_2);
                    divTag2.appendChild(divTag2_1);
                    divTag2.appendChild(divTag2_2);
                    divTag2.appendChild(divTag2_3);

                }
            },
            error:function () {
                alert("系统故障，获取不到数据！")
            }
        })
    }

    // 点击 打赏后 跳转到支付页面
    $('#pay').click(function() {
        event.preventDefault();
        // 在这里可以编写跳转到支付页面的代码
        $.ajax({
            url: "Alipay",
            type: "get",
            dataType: "json",
            success(data){
                window.location.href = data.payUrl
            }
        })
    });

    // 判断用户此时是否登录
    function Islogin(){
        $.ajax({
            url:"/isLogin",
            type:"get",
            dataType:"json",
            success:function (data){
                const islogin = document.getElementById('isLogin');
                islogin.innerText = data.data;
            }
        })
    }

    // 不同情况下 点击登录按钮
    document.getElementById('isLogin').onclick = function (){
        const loginContext = document.getElementById('isLogin').innerText;
        if (loginContext == '登录'){
            document.getElementById('isLogin').href = '/login';
        }else if (loginContext == '退出登录'){
            $.ajax({
                url:"/logout",
                type:"get",
                success:function (){
                    alert("退出成功！")
                    document.getElementById('isLogin').innerText = '登录';
                }
            })

        }else{

        }
    }

    // 提交意见
    document.getElementById('submit_but').onclick = function (){
        var email = document.getElementById('email').value;
        var message = document.getElementById('message').value;
        $.ajax({
            url:"/advice/add",
            type:"post",
            data: JSON.stringify({
                email: email,
                content: message
            }),
            contentType: "application/json",
            dataType: "json",
            success:function (){
                document.getElementById('message').value = '';
                alert("感谢您的反馈!")
            },

        })
    }

    //  格式化  时间
    function parseDateTime(timeString) {
        // 将时间字符串解析为Date对象
        const date = new Date(timeString);

        // 获取年、月、日、时、分、秒
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');

        // 格式化为标准时间格式（例如：YYYY-MM-DD HH:MM:SS）
        const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

        return formattedDateTime;
    }


    // 新增 功能 -----------------------------------------

    var slideIndex = 1;
    showSlides(slideIndex);

    // 设置自动轮播
    var autoSlide = setInterval(function () {
        plusSlides(1);
    }, 5000); // 切换间隔时间为2秒

    function plusSlides(n) {
        clearInterval(autoSlide); // 清除之前的定时器
        showSlides(slideIndex += n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        if (n > slides.length) { slideIndex = 1 }
        if (n < 1) { slideIndex = slides.length }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slides[slideIndex - 1].style.display = "block";

        // 更新自动轮播
        autoSlide = setInterval(function () {
            plusSlides(1);
        }, 5000); // 切换间隔时间为2秒
    }

    //  设置单个文章最大 字体数
    // 获取所有具有 'abstract' 类的元素
    var abstractContents = document.getElementsByClassName('abstract');
    var maxLength = 80; // 设置最大文字数量

    // 循环处理每个元素
    for (var i = 0; i < abstractContents.length; i++) {
        var abstractContent = abstractContents[i];
        // 检查文本长度是否超过最大值
        if (abstractContent.textContent.length > maxLength) {
            // 将文本内容截断并添加省略号
            abstractContent.textContent = abstractContent.textContent.substring(0, maxLength) + '...';
        }
    }


    //  新增 日历 功能
    document.addEventListener('DOMContentLoaded', function () {
        const monthYearDisplay = document.getElementById('monthYearDisplay');
        const calendarDays = document.getElementById('calendarDays');
        const prevMonthBtn = document.getElementById('prevMonthBtn');
        const nextMonthBtn = document.getElementById('nextMonthBtn');

        let currentDate = new Date();

        function renderCalendar() {
            const today = new Date().getDate();
            const currentMonthDays = new Date(
                currentDate.getFullYear(),
                currentDate.getMonth() + 1,
                0
            ).getDate();
            const firstDayIndex = new Date(
                currentDate.getFullYear(),
                currentDate.getMonth(),
                1
            ).getDay();
            const lastDayIndex = new Date(
                currentDate.getFullYear(),
                currentDate.getMonth() + 1,
                0
            ).getDay();

            const prevMonthLastDay = new Date(
                currentDate.getFullYear(),
                currentDate.getMonth(),
                0
            ).getDate();

            const months = [
                'January',
                'February',
                'March',
                'April',
                'May',
                'June',
                'July',
                'August',
                'September',
                'October',
                'November',
                'December',
            ];

            monthYearDisplay.innerHTML = `${months[currentDate.getMonth()]} ${currentDate.getFullYear()}`;

            let days = '';

            for (let i = firstDayIndex; i > 0; i--) {
                days += `<div class="calendar-day prev-month">${prevMonthLastDay - i + 1}</div>`;
            }

            for (let i = 1; i <= currentMonthDays; i++) {
                if (
                    i === today &&
                    currentDate.getMonth() === new Date().getMonth() &&
                    currentDate.getFullYear() === new Date().getFullYear()
                ) {
                    days += `<div class="calendar-day current-month today">${i}</div>`;
                } else {
                    days += `<div class="calendar-day current-month">${i}</div>`;
                }
            }

            for (let i = 1; i <= 6 - lastDayIndex; i++) {
                days += `<div class="calendar-day next-month">${i}</div>`;
            }

            calendarDays.innerHTML = days;
        }

        renderCalendar();

        prevMonthBtn.addEventListener('click', () => {
            currentDate.setMonth(currentDate.getMonth() - 1);
            renderCalendar();
        });

        nextMonthBtn.addEventListener('click', () => {
            currentDate.setMonth(currentDate.getMonth() + 1);
            renderCalendar();
        });
    });


    // 轮播图上的文字
    const phrases = ["小熊维尼的第一代博客", "重磅来袭", "欢迎您的光临"];
    let currentPhraseIndex = 0;
    let currentCharacterIndex = 0;
    let deleting = false;

    function typeText() {
        const textElement = document.getElementById("text_add_del");
        const currentPhrase = phrases[currentPhraseIndex];

        if (deleting) {
            textElement.textContent = currentPhrase.substring(0, currentCharacterIndex);
            currentCharacterIndex--;

            if (currentCharacterIndex < 0) {
                deleting = false;
                currentPhraseIndex = (currentPhraseIndex + 1) % phrases.length;
            }
        } else {
            textElement.textContent = currentPhrase.substring(0, currentCharacterIndex);
            currentCharacterIndex++;

            if (currentCharacterIndex > currentPhrase.length) {
                deleting = true;
            }
        }

        setTimeout(typeText, deleting ? 100 : 200);
    }

    typeText();
</script>

</body>
</html>